<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<md-dialog aria-label="New path mapping" style="min-width: 600px">
  <form name="formLoggingConfiguration" ng-submit="$ctrl.save()" novalidate>
    <md-dialog-content layout-padding layout="column">
      <h4>Logging condition editor</h4>
      <label style="color: #5a646d">When multiple conditions are defined, a logical AND is applied.</label>

      <div layout="column">
        <div layout="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>Condition type</label>
            <md-select ng-model="selectedType" md-auto-focus>
              <md-option ng-repeat="type in types" value="{{type.id}}"> {{type.title}} </md-option>
            </md-select>
          </md-input-container>
          <md-button md-no-ink class="md-primary" ng-click="$ctrl.addCondition()" ng-disabled="!selectedType"> Add </md-button>
        </div>

        <hr />

        <div layout="row" ng-repeat="condition in conditions" ng-switch on="condition.type.id">
          <!-- plan -->
          <div ng-switch-when="plan" layout="row" layout-align="center center" flex>
            <div flex="10">
              <ng-md-icon icon="close" size="24px" ng-click="$ctrl.removeCondition($index)"></ng-md-icon>
            </div>
            <md-input-container flex>
              <label>Plan is </label>
              <md-select ng-model="condition.value">
                <md-option ng-repeat="plan in plans" value="{{plan.id}}"> {{plan.name}} </md-option>
              </md-select>
            </md-input-container>
          </div>

          <!-- application -->
          <div ng-switch-when="application" layout="row" layout-align="center center" flex>
            <div flex="10">
              <ng-md-icon icon="close" size="24px" ng-click="$ctrl.removeCondition($index)"></ng-md-icon>
            </div>
            <md-input-container flex>
              <label>Application is </label>
              <md-select ng-model="condition.value">
                <md-option ng-repeat="application in subscribers" value="{{application.id}}"> {{application.name}} </md-option>
              </md-select>
            </md-input-container>
          </div>

          <!-- request header -->
          <div ng-switch-when="request-header" layout="row" layout-align="center center" flex>
            <div flex="10">
              <ng-md-icon icon="close" size="24px" ng-click="$ctrl.removeCondition($index)"></ng-md-icon>
            </div>
            <div layout="row" layout-align="space-between center" flex>
              <md-input-container>
                <label>Header name</label>
                <input aria-label="Header name" ng-model="condition.param1" type="text" required />
              </md-input-container>
              <span> is equals to </span>
              <md-input-container>
                <label>value</label>
                <input aria-label="Header value" ng-model="condition.value" type="text" required />
              </md-input-container>
            </div>
          </div>

          <!-- request param -->
          <div ng-switch-when="request-param" layout="row" layout-align="center center" flex>
            <div flex="10">
              <ng-md-icon icon="close" size="24px" ng-click="$ctrl.removeCondition($index)"></ng-md-icon>
            </div>
            <div layout="row" layout-align="space-between center" flex>
              <md-input-container>
                <label>Query parameter name</label>
                <input aria-label="Param name" ng-model="condition.param1" type="text" required />
              </md-input-container>
              <span> is equals to </span>
              <md-input-container>
                <label>value</label>
                <input aria-label="Param value" ng-model="condition.value" type="text" required />
              </md-input-container>
            </div>
          </div>

          <!-- request method -->
          <div ng-switch-when="request-method" layout="row" layout-align="center center" flex>
            <div flex="10">
              <ng-md-icon icon="close" size="24px" ng-click="$ctrl.removeCondition($index)"></ng-md-icon>
            </div>
            <md-input-container flex>
              <label>HTTP Method is</label>
              <md-select ng-model="condition.value">
                <md-option ng-repeat="method in methods" value="{{method}}"> {{method}} </md-option>
              </md-select>
            </md-input-container>
          </div>

          <!-- request remote address -->
          <div ng-switch-when="request-remote-address" layout="row" layout-align="center center" flex>
            <div flex="10">
              <ng-md-icon icon="close" size="24px" ng-click="$ctrl.removeCondition($index)"></ng-md-icon>
            </div>
            <md-input-container style="margin-bottom: 0; padding-bottom: 0" flex>
              <label>Request remote address is</label>
              <input ng-model="condition.value" type="text" required />
            </md-input-container>
          </div>

          <!-- logging duration -->
          <div ng-switch-when="logging-duration" layout="row" layout-align="center center" flex>
            <div flex="10">
              <ng-md-icon icon="close" size="24px" ng-click="$ctrl.removeCondition($index)"></ng-md-icon>
            </div>
            <div layout="row" layout-align="space-between center" flex>
              <span>Logging is ended in </span>
              <md-input-container style="margin-bottom: 0; padding-bottom: 0">
                <label>Duration Time</label>
                <input ng-model="condition.param1" type="number" min="1" required />
              </md-input-container>
              <md-input-container>
                <label>Time Unit</label>
                <md-select ng-model="condition.param2" required>
                  <md-option ng-value="timeUnit" ng-repeat="timeUnit in timeUnits">{{timeUnit}}</md-option>
                </md-select>
              </md-input-container>
            </div>
          </div>

          <!-- logging end date -->
          <div ng-switch-when="logging-end-date" layout="row" layout-align="center center" flex>
            <div flex="10">
              <ng-md-icon icon="close" size="24px" ng-click="$ctrl.removeCondition($index)"></ng-md-icon>
            </div>
            <md-input-container flex>
              <label>Logging is ended at </label>
              <input
                moment-picker="pickerStartDateFormated"
                format="YYYY-MM-DD HH:mm"
                ng-model="condition.param1"
                ng-model-options="{ updateOn: 'blur' }"
              />
            </md-input-container>
          </div>
        </div>
      </div>
    </md-dialog-content>

    <md-dialog-actions layout="row">
      <md-button ng-click="$ctrl.hide()">Cancel</md-button>
      <md-button type="submit" class="md-raised md-primary" ng-disabled="formLoggingConfiguration.$invalid">Save</md-button>
    </md-dialog-actions>
  </form>
</md-dialog>
